checkLogin(true);

$(function () {

    // //页面一开始加载完毕之后，把数据从服务器端带回来，展示在页面上
    // $.post("../php/articles/getArticlesAll.php",function (res) {
    //     // console.log(res);
    //     //当请求成功的时候，渲染数据
    //     if (res.code == 100){
    //         //使用模板引擎渲染数据
    //         //1. 引入模板
    //         //2. 书写模板
    //         //3. 使用模板的方法，生成结构
    //         var html = $("#mt").tmpl(res.data);
    //         //4. 渲染到页面上 --- 把结构添加到指定的位置
    //         $("#dataset").append(html);
    //     } else {
    //         alert(res.msg);
    //     }
    // },"json");



    //每页的数据量 --- 具体根据每个用户自己的需求设置，我们暂定就是每页10条
    var pageCount = 10;
    //总的数据条数
    // var dataCount = 要从服务器返回;
    var dataCount = 1004;
    //总的页码数 --- 页码的最大值
    var maxCount = Math.ceil(dataCount / pageCount);
    //总共显示的按钮的个数，暂定5个
    var buttonCounts = 5;
    //开始页码
    var start;
    //结束页码
    var end;
    //当前页码 --- 由点击按钮决定当前的页码是多少，一开始默认是第一页
    var current = 1;


    //一开始调用一次，加载初始数据
    // getArticlesByPage();
    //如果一开始就调用一次，这时分类的数据还没有获取过来，就没有分类的 条件
    //在分类获取完成之后，再加载数据

    //封装起来的获取数据的方法
    // function getArticlesByPage() {
    //     //分页的获取数据
    //     $.post("../php/articles/getArticlesByPage.php",{currentPage : current, pageCount : pageCount}, function (res) {
            // console.log(res);


    /**
     *  封装起来的根据条件和分页获取数据的方法
     *  param data 传递到服务器的数据 是一个对象，可选
     *  键
     *      currentPage：当前页码
     *      pageCount：页面容纳的数据条数
     *      category_id：分类id
     *      status：文章状态数字
     */

    function getArticlesByPage() {
        //传递到后台的数据，给予默认值
        var data = {};

        var category_id = $("#categories").val();
        var status = $("#status").val();

        //如果分类选择的是所有分类 --- 不根据分类来筛选
        if (category_id != ""){
            data.category_id = category_id;
        }

        //如果状态选择的是所有状态 --- 不根据状态筛选
        if (status != ""){
            data.status = status;
        }

        //给data的键赋值
        data.currentPage = current;
        data.pageCount = pageCount;

        //请求后台的数据接口
        $.post("../php/articles/getArticlesByPageByCondition.php",data,function (res) {

            //使用模板引擎把数据加载到表格里面
            if (res.code == 100){
                var html = $("#mt").tmpl(res.data);
                //渲染到页面上 --- 首先把以前的数据清空，再把新的数据填充到表格
                // $("#dataset").html("").append(html);
                $("#dataset").empty().append(html);
            } else {
                alert(res.msg);
            }

            //把分页数据重新赋值
            dataCount = res.dataCount;
            maxCount = Math.ceil(dataCount / pageCount);
            //因为此时我们的数据已经发生改变，当初一开始生成的结构可能就不准确
            //每次点击分页按钮都是一次新的请求，都要重新计算生成的开始和结尾等数据
            start = current - Math.floor(buttonCounts / 2);
            //如果开始页码小于1，开始页码就不能合理，强制把开始页码设置为1
            if (start < 1){
                start = 1;
            }
            //结束的页码 --- 开始页码占了总数的一个，还剩下总数 - 1 个
            end = start + buttonCounts - 1;
            //如果 end 大于最大的页码数
            if (end > maxCount){
                end = maxCount;
                //为了保证开始页码到结束页码还是5个按钮，重新计算出开始页码
                start = end - (buttonCounts - 1);
            }

            var html = "";
            //如果当前页面是第一页，就没有上一页
            if (current != 1){
                html += "<li><a href='javascript:void(0);' class='page-button' page='"+(current - 1)+"'>上一页</a></li>";
            }

            //如果当前的页码是中间显示的，循环生成
            for (var i = start; i <= end; i++) {
                html += "<li><a href='javascript:void(0);' class='page-button' page ='"+i+"'>"+ i +"</a></li>";
            }

            //如果当前页已经是最后一页，没有下一页
            if (current != maxCount){
                html += "<li><a href='javascript:void(0);' class='page-button' page='"+(current + 1)+"'>下一页</a></li>";
            }

            //把结构放到ul里面
            $("#pagination").html(html);

        },"json");
    }

    /**
     *  如果要完成分页的逻辑
     *      1. 先把动态生成的分页按钮先写好
     *
     *          需要的要素：
     *              所有的结构都是li里面包着a
     *
     *              <<li><a href='javascript:void(0);' class='page-button' page ='"+i+"'>"+ i +"</a></li>
     *
     *              一共7个按钮
     *              一个是上一页，一个是下一页，剩下的5个按钮都是数字
     *
     *      2. 生成结构
     *          2.1 生成一个上一页
     *          2.2 循环5次生成5个按钮
     *          2.3 生成一个下一页
     *
     *      3. 假设当前是第5页
     *          上一页 3 4 5 6 7 下一页
     *
     *      ---> 有一个开始的页码有一个当前的页码 有一个结束的页码
     *
     *
     *      点击按钮可以切换分页数据
     *          给分页按钮注册点击事件
     *
     *          因为所有的分页按钮都是动态创建的，所有使用委托注册事件
     */


    $("#pagination").on("click",".page-button",function () {
        //获取被点击的按钮的代表的页码
        var thisPage = parseInt($(this).attr("page"));
        //切换分页数据 --- 也是根据点击的按钮决定当前页是多少，去服务器获取分页数据
        current = thisPage;
        getArticlesByPage();
    });


    /**
     *  第三天
     *      1. 获取所有的分类
     */

    //发送请求到服务器，获取所有的分类数据，在页面上生成一个下拉框
    $.post("../php/categories/getCategoriesAll.php",function (res) {
        //根据返回的数据动态生成一个下拉框
        // console.log(res);
        if (res.code == 100){
            //把数据插入到下拉框
            var html = "<option value = '' >所有分类</option>";
            for (var i = 0; i < res.data.length; i++) {
                html += "<option value = '"+ res.data[i].id +"'>" + res.data[i].name + "</option>";
            }
            $("#categories").html(html);
            //最终封装好的获取数据的函数，必须是在把分类获取回来，并且生成分类结构之后，才能调用
            getArticlesByPage();

        }
    },"json");

    //点击筛选数据功能
    $("#queryby").on("click",function () {
        getArticlesByPage();
    });



    //点击编辑按钮，可以跳转到新增页面
    $("#dataset").on("click",".edit",function () {
		//current = thisPage;
        //获取article_id
        var id = $(this).parent().parent().attr("article_id");
            //让页面跳转到新增页面 --- 通过url传参的方式进行id的传递
            location.href = "addArticle.html?id=" + id;
    });


    /**
     *  删除功能
     *      用户间距删除按钮，询问要不要删除，如果点击确认，告诉服务器根据id删除
     */

    $("#dataset").on("click",".del",function () {

        // //询问
        // if (confirm("您确定要删除这条数据吗？")){
        //     //根据id删除
        //     var id = $(this).parent().parent().attr("article_id");
        //     $.post("../php/articles/deleteArticleById.php",{id:id},function (res) {
        //         if (res.code == 100){
        //             alert(res.msg);
        //             /*
        //             *   数据在服务端已经删除了，但是因为是异步操作，所以页面的数据是不会更新的
        //             *
        //             *   1. 在删除成功之后，刷新页面 --- 重新获取数据
        //              *   好处：数据是最新的，每次都去服务器重新请求
        //              *   缺点：服务器和浏览器的交互过于频繁
        //              *
        //              *
        //              *   2. 删除成功之后，手动地对这一行进行删除（删除节点的方式）
        //              *   好处：没有跟服务器进行交互，不会给服务器增加交互压力
        //              *   缺点：数据不是最新的
        //              *
        //              *
        //              *   一般情况下，如果是后台管理系统 --- 少数人使用，采用第一种方式；如果是面向大部分用户的，比如淘宝的购物车的删除，建议采用手动删除节点的方式
        //              *
        //             * */
        //
        //             location.reload();
        //         } else {
        //             alert(res.msg);
        //         }
        //     },"json");
        // }


        //因为回调函数里面的this是指向调用回调函数的对象的，需要提前保持起来
        var _that = this;

        //使用layer.js的弹窗
        layer.confirm("您确定真的要删除这条数据吗？",{icon:3,title:"您正在进行删除操作……"},function (index) {
            //这个函数是在用户点击确定按钮的时候执行
            //如果有确定的回调函数，默认不会自动关闭弹窗，需要手动关闭
            layer.close(index);

            var id = $(_that).parent().parent().attr("article_id");
            //发送id到服务器端进行删除操作
            $.post("../php/articles/deleteArticleById.php",{id:id},function (res) {
                if (res.code == 100){
                    layer.alert(res.msg,{icon:1},function (index) {
                        //该回调函数是在点击确定按钮的时候调用的
                        // location.reload();

                        //这里是让页面还在原来的页面
                        layer.close(index);
                        $("#dataset").empty();
                        getArticlesByPage();
                    });
                } else {
                    layer.alert(res.msg);
                }
            },"json");
        });

    });


    /**
     *  批量删除 --- 全选和全不选
     */

    $("thead input[type=checkbox]").on("click",function () {
        //控制别的多炫酷跟我的选中状态一样的
        //找到别的多选框，设置其状态跟我的一致
        //如果使用jq来操作元素的html属性 --- 两个方法 attr || prop
        //一般使用attr来操作 标准属性和自定义属性prop来操作开关属性
        var res = $(this).prop("checked");

        $("#dataset input[type=checkbox]").prop("checked",res);
        //如果上方的全选被选中就显示批量删除按钮，否则不显示
        if (res){
            $("#del-mul").show();
        } else {
            $("#del-mul").hide();
        }

    });

    //给下面的多选框支持点击事件
    $("#dataset").on("click","input[type=checkbox]",function () {
        // console.log(123);

        //如果下面的多选框都被选中了，上面的全选也要选中，否则全选不能选中
        // if ($("#dataset input[type=checkbox]:checked").size() == pageCount){
        //     //如果选中的个数跟页面显示的属性一致 都选中了
        //     $("thead input[type=checkbox]").prop("checked",true);
        // } else {
        //     $("thead input[type=checkbox]").prop("checked",false);
        // }


        var count = $("#dataset input[type=checkbox]:checked").size();

        $("thead input[type=checkbox]").prop("checked",count == pageCount);
        //如果点选的下拉框超过两个，就显示批量删除
        if (count >= 2){
            $("#del-mul").show();
        } else {
            $("#del-mul").hide();
        }

    });


    //点击批量删除按钮
    $("#del-mul").on("click",function () {

        layer.confirm("您确定要删除这些数据吗？",{icon:3},function (index) {
            //定义一个空数组，用来存储id
            var ids = [];

            //把选中的下拉框的数据，文章id以数组的形式发送到服务器

            //1. 先找到所有被选中的checkbox
            var cks = $("#dataset input[type=checkbox]:checked");

            //2. 遍历这些选中的checkbox，找到其对应的数据id
            cks.each(function (index, element) {
                var id = $(element).parent().parent().attr("article_id");

                //3. 把这些id放到一个数组里面
                ids.push(id);
            });

            //4. 把id数组发送到服务器
            $.post("../php/articles/deleteArticlesMultiple.php",{ids:ids},function (res) {
                if (res.code == 100){
                    layer.alert(res.msg,{icon:1},function (index) {
                        // location.reload();

                        //这是让页面不刷新
                        $("#dataset").empty();
                        getArticlesByPage();
                        $("#del-mul").hide();
                        layer.close(index);
                    });
                } else {
                    layer.alert(res.msg,{icon:2},function (index) {
                        layer.close(index);
                    });
                }
            },"json");

            layer.close(index);
        });

    });
});


